@()(implicit session: Session)
@english.home.main("Sequences Fetch") {


    <hgroup class="page-head">
        <h2>Sequences<span> Fetch</span></h2>
    </hgroup>

    <div style="width: 1200px;margin: auto;margin-top: -30px;margin-bottom: 40px;font-size: 18px">
        <a href="/US/PODB/tools/tool" style="color: #428bca">Tools</a> - Sequences Fetch
    </div>

    <div id="container" class="clearfix">
        <div id="content" class="full-width">
    <form class="registration-form form-horizontal" id="conditionForm"
    style="margin: 20px;">

        <div class="form-group" style="margin-top: 10px">
            <label class="control-label col-sm-2 col-sm-offset-1">Select annotation:</label>
            <div class="col-sm-6">
                <select class="form-control" name="species" id="species">
                    <option value="/cp/Bacillariophyta.genome">Bacillariophyta - Chloroplast</option>
                    <option value="/cp/Cerzozoa.genome">Cerzozoa - Chloroplast</option>
                    <option value="/cp/Charophyta.genome">Charophyta - Chloroplast</option>
                    <option value="/cp/Chlorophyta.genome">Chlorophyta - Chloroplast</option>
                    <option value="/cp/Cryptophyta.genome">Cryptophyta - Chloroplast</option>
                    <option value="/cp/Euglenozoa.genome">Euglenozoa - Chloroplast</option>
                    <option value="/cp/Glaucophyta.genome">Glaucophyta - Chloroplast</option>
                    <option value="/cp/Haptophyta.genome">Haptophyta - Chloroplast</option>
                    <option value="/cp/Myzozoa.genome">Myzozoa - Chloroplast</option>
                    <option value="/cp/Ochrophyta.genome">Ochrophyta - Chloroplast</option>
                    <option value="/cp/Rhodophyta.genome">Rhodophyta - Chloroplast</option>
                    <option value="/mt/Bacillariophyta.genome">Bacillariophyta - Mitochondria</option>
                    <option value="/mt/Cerzozoa.genome">Cerzozoa - Mitochondria</option>
                    <option value="/mt/Charophyta.genome">Charophyta - Mitochondria</option>
                    <option value="/mt/Chlorophyta.genome">Chlorophyta - Mitochondria</option>
                    <option value="/mt/Cryptophyta.genome">Cryptophyta - Mitochondria</option>
                    <option value="/mt/Glaucophyta.genome">Glaucophyta - Mitochondria</option>
                    <option value="/mt/Haptophyta.genome">Haptophyta - Mitochondria</option>
                    <option value="/mt/Ochrophyta.genome">Ochrophyta - Mitochondria</option>
                    <option value="/mt/Rhodophyta.genome">Rhodophyta - Mitochondria</option>
                </select>
            </div>
        </div>


        <div class="form-group" style="margin-top: 15px">
            <label class="control-label col-sm-2 col-sm-offset-1">Search text:</label>
            <div class="col-sm-6">
                <textarea class="form-control" name="region" id="region" rows="5"></textarea>
                <span class="help-block">e.g.,&nbsp;<a href="#"><em id="egChr">
                    AP011960:1-2000 AP018511:500-1000</em></a></span>
            </div>
        </div>

        <div class="form-group" style="margin-top: 35px">
            <div class="actions col-sm-offset-3 col-sm-3">
                <button type="button" id="search"
                class="btn btn-primary" onclick="mySearch()" style="width: 80%;
                    margin-top: 5px">Search</button>
            </div>
            <div class="actions col-sm-3" style="text-align: right">
                <button type="reset" class="btn btn-primary" id="reset" style="width: 80%;
                    margin-top: 5px">Reset</button>
            </div>
        </div>
    </form>


            <div id="result" style="display: none">
                <hr>
                <h4>Sequence:</h4>
                <div class="form-group">
                    <div class="col-sm-12">

      @*                  <iframe style="border: 1px solid rgb(80, 80, 80);" src=""
                        height="250" width="100%" name="jbrowse_iframe" id="iframe">
                        </iframe>*@

                        <textarea class="form-control monospace" name="queryText" id="queryText" rows="15"></textarea>
                    </div>
                </div>
            </div>

        </div>
    </div>




    <script>
            $(function () {

                $('#egChr').click(function () {
                    var eg = $(this).text().trim();
                    $('#region').val(eg).focus();
                    $("#conditionForm").formValidation("revalidateField", "region")
                });

                $('#reset').click(function () {
                    $('#region').val("").focus();
                    $("#conditionForm").formValidation("revalidateField", "region")
                });

                formValidation()

            });

            function formValidation() {
                $('#conditionForm').formValidation({
                    framework: 'bootstrap',
                    icon: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        region: {
                            validators: {
                                notEmpty: {
                                    message: 'Region is required！'
                                }
                            }
                        }
                    }
                });
            }

            function mySearch() {
                var form = $("#conditionForm");
                var fv = form.data("formValidation");
                fv.validate();
                if (fv.isValid()) {
                    var index = layer.load(1, {
                        shade: [0.1, '#fff']
                    });
                    $("#search").attr("disabled", true).html("Search...");
                    $.ajax({
                        url: "@routes.ToolsController.seqRegion()",
                        type: "post",
                        data: $("#conditionForm").serialize(),
                        success: function (data) {
                            $("#search").attr("disabled", false).html("Search").blur();
                            layer.close(index);
                            if (data.valid == "false") {
                                swal("Error", data.message, "error");
                                $("#result").hide()
                            } else {
                              /*  var species = $("#species").val();
                                console.log(species);
                                $("#iframe").attr("src","http://210.22.121.250:20795/jb/index.html?data=my_data/PODB/species/data&loc=:1..1000&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0")
                         */
                              $("#queryText").val(data.data);
                              $("#result").show()

                            }
                        }
                    });
                }
            }
    </script>


}